<template>
  <div class="main_body1" style="height:600px;padding: 0 10px;">
    <div style="display:flex;flex-direction:column;height: 10px;"></div>
    <div :class="status == '1' ? 'card' : 'card1'" v-if="bankCardNum">
      <div class="card_m">
        <div class="card_main">
          <div class="card_top">
            <van-icon name="debit-pay" size="24" />
            <div class="card_name">{{bankName}}</div>
          </div>
          <div class="card_num">{{bankCardNum}}</div>
          <div class="user_name">{{trueName}}</div>
        </div>
        <div>
          <div style="margin-top:30rpx;color:#6E5F23;" v-if="status == '0'">待审核</div>
          <div style="margin-top:30rpx;color:#fff;" v-if="status == '1'">审核通过</div>
          <div class="card_top1" style="color:red;margin-top: 40rpx;" v-if="status == '2'" @click="toAddPay()">审核拒绝</div>
        </div>
      </div>
      <div class="card_top1" @click="toAddPay()" v-if="status == '2'">
        <div class="refuse_result_head">拒绝原因：</div>
        <div class="refuse_result_body">账户不匹配，请检查后重新提交</div>
      </div>
    </div>
    <div :class="status == '1' ? 'card' : 'card1'" v-if="aliPayAccount">
      <div class="card_m">
        <div class="card_main">
          <div class="card_top">
            <van-icon name="gold-coin-o" size="24"/>
            <div class="card_name">支付宝</div>
          </div>
          <div class="card_num">{{aliPayAccount}}</div>
          <div class="user_name">{{trueName}}</div>
        </div>
        <div>
          <div style="margin-top:30rpx;color:#6E5F23;" v-if="status == '0'">待审核</div>
          <div style="margin-top:30rpx;color:#fff;" v-if="status == '1'">审核通过</div>
          <div class="card_top1" style="color:red;margin-top: 40rpx;" @click="toAddPay()" v-if="status == '2'">审核拒绝</div>
        </div>
      </div>
      <div class="card_top1" @click="toAddPay()" v-if="status == '2'">
        <div class="refuse_result_head">拒绝原因：</div>
        <div class="refuse_result_body">账户不匹配，请检查后重新提交</div>
      </div>
    </div>
    <div class="full"></div>
    <div class="bottom">
      <div class="zfb_button">
        <span class="button" type="warn" @click="toAddPay()" v-if="accountType == '1'">添加支付宝</span>
      </div>
      <div class="yhk_button">
        <span class="button" type="warn" @click="toAddPay()" v-if="accountType == '2'">添加银行卡</span>
      </div>
      <div class="yhk_button">
        <span class="button" type="warn" @click="toMyWallet()" v-if="accountType == '3'">返回</span>
      </div>
    </div>
  </div>
</template>
<script>
  var baseConfig = require("../utils/baseConfig");

  import Vue from 'vue';
  import { Icon } from 'vant';

  Vue.use(Icon);

  export default {
    name: 'ksmyPayCard',
    data(){
      return {
        bankName: '',
        trueName: '',
        bankCardNum: '',
        aliPayAccount: '',
        status: '',
        accountType: '',
      }
    },
    created() {
      this.get_bank_alipay_list();
    },
    methods: {
      toAddPay() { // 跳转至银行卡/支付宝
        // console.log('跳转至银行卡/支付宝');
        this.$router.push('/ksaddPay');
      },
      toMyWallet() { // 返回我的钱包
        // console.log('返回我的钱包');
        this.$router.push('/');
      },
      get_bank_alipay_list() {
        // let loginUserId = 'ohI6C4tTiL0skHDt-FaRfOnBMkI0';
        // let uid = '135';
        let loginUserId = JSON.parse(localStorage.getItem('userInfo')).openid;
        let uid = JSON.parse(localStorage.getItem('userInfo')).id;
        this.$http.post(`${baseConfig.url}tuiwaApp/get_bank_alipay_list?loginUserId=` + loginUserId
          + '&uid=' + uid)
          .then(
            res => {
              console.log(res.data.data[0]);
              if (!res.data.data[0].bankCardNum) {
                  this.aliPayAccount = res.data.data[0].aliPayAccount
                  this.trueName = res.data.data[0].trueName
                  this.status = res.data.data[0].status
                  this.accountType= res.data.data[0].accountType
              } else if(!res.data.data[0].aliPayAccount) {
                  this.bankName = res.data.data[0].bankName
                  this.bankCardNum = res.data.data[0].bankCardNum.replace(/\s/g, '').replace(/(\d{4})\d+(\d{4})$/, "**** **** **** $2") // 将银行卡号前部分用 * 代替，仅显示后四位
                  this.trueName = res.data.data[0].trueName
                  this.status = res.data.data[0].status
                  this.accountType= res.data.data[0].accountType
              } else if (res.data.data[0].aliPayAccount && res.data.data[0].bankCardNum) {
                  this.aliPayAccount = res.data.data[0].aliPayAccount
                  this.bankName = res.data.data[0].bankName
                  this.bankCardNum = res.data.data[0].bankCardNum.replace(/\s/g, '').replace(/(\d{4})\d+(\d{4})$/, "**** **** **** $2") // 将银行卡号前部分用 * 代替，仅显示后四位
                  this.trueName = res.data.data[0].trueName
                  this.status = res.data.data[0].status
                  this.accountType= res.data.data[0].accountType
              }
            }
          )
      },
    }
  }
</script>
<style scoped>
/* 添加银行卡/支付宝 按钮 */
.bottom .button {
  position: fixed;
  bottom: 2.5%;
  left: 2.5%;
  width: 95%;
  height: 40px;
  line-height: 40px;
  color: #fff;
  background: #49ccc3;
  border-radius: 10px;
}

/* 审核通过card */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #fff;
  background: #49ccc3;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 10px;
}
.card1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #fff;
  background: #6dc3e6;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 10px;
}
.card_m {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.card_main {
  color: #fff;
  font-size: 20px;
  margin-top: 10px;
}

.card_main .iconfont {
  color: #fff;
  font-size: 28px;
}

.card_main .card_top {
  display: flex;
  flex-direction: row;
}

.card_main .card_top .card_name {
  color: #fff;
  font-size: 20px;
  margin-left: 10px;
}

.card_main .card_num {
  color: #fff;
  font-size: 20px;
  margin-top: 20px;
}

.card_main .user_name {
  color: #fff;
  font-size: 20px;
  margin-top: 10px;
  text-align: left;
}

/* 拒绝card */
.refuse .card_num {
  color: #fff;
  font-size: 18px;
  margin-top: 10px;
}

.refuse .user_name {
  color: #fff;
  font-size: 18px;
  margin-top: 5px;
  text-align: left;
}

.card_top1 {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.card_top1 .refuse_result_head {
  color: #fff;
  font-size: 14px;
}

.card_top1 .refuse_result_body {
  color: red;
  font-size: 14px;
}

.full {
  height: 40px;
}
</style>